$fs-s = 10px // small

$fc-b3 = #999 // light

$info = #909399
$blue = #409EFF
$theme = $blue
$success = #67C23A
$warning = #E6A23C
$danger = #F56C6C
$light-blue = #e8f1ff

$table-head = $light-blue

_unactive = 180px + 70px 
_active = 64px + 70px  // layout.active 

media-query(class, itemWidth, num = 2...10)
  for $i in num
    @media only screen and (min-width: itemWidth*$i + _active)
      .layout.active {class}
        width (1/$i)*100%
    @media only screen and (min-width: itemWidth*$i + _unactive)
      .layout {class}
        width (1/$i)*100%


hover($color = $theme, $bgc= rgba(#000, 0))
  &:hover
    color $color!important
    cursor pointer
    background-color $bgc

media-query(class, itemWidth, spacing = 0%, otherWidth = 240px)
  for idx in 1...10
    @media only screen and (min-width: itemWidth * idx + otherWidth)
      .layout {class}
        width (1/idx)*100% - spacing
